{{ $src := .Destination | safeURL }}
{{ $id  := index (last 1 (split .Destination "/")) 0 | replaceRE ".png" "" }}
<figure x-data="{ open: false }">
  <img src="{{ $src }}"{{ with .Text }} alt="{{ . }}"{{ end }} id="{{ $id }}" @click="open = true">

  <div class="modal" id="modal-{{ $id }}" :class="{ 'is-active': open }">
    <div class="modal-background" @click="open = !open"></div>
    <div class="modal-content">
      <p class="image">
        <img src="{{ $src }}"{{ with .Text }} alt="{{ . }}"{{ end }}>
      </p>
    </div>
  
    <button class="modal-close is-large" aria-label="close" @click="open = false"></button>
  </div>
</figure>
